{% extends "layout.html" %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
{% endblock %}

{% block content %}
<div class="login-wrapper">
    <div class="login-card">
        <div class="login-header">
            <h2>欢迎回来</h2>
            <p>请登录您的账户</p>
        </div>

        <form method="POST" action="{{ url_for('auth.login') }}" class="login-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <div class="input-with-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    <input type="text" id="username" name="username" placeholder="请输入用户名" required>
                </div>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <div class="input-with-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    <input type="password" id="password" name="password" placeholder="请输入密码" required>
                </div>
            </div>

            <div class="form-options">
                <label class="remember-me">
                    <input type="checkbox" name="remember">
                    <span>记住我</span>
                </label>
                <a href="{{ url_for('auth.forgot_password') }}" class="forgot-password">忘记密码?</a>
            </div>

            <button type="submit" class="login-btn">
                <span>登录</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                    <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
            </button>

            <div class="divider">
                <span>或</span>
            </div>

<!--            <div class="social-login">-->
<!--                <button type="button" class="social-btn google">-->
<!--                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<!--                        <path d="M21.8 12.18c0-.54-.05-1.06-.14-1.56H12v2.95h5.5a3.6 3.6 0 0 1-1.56 2.36v1.96h2.52c1.48-1.36 2.34-3.37 2.34-5.71z"></path>-->
<!--                        <path d="M12 22c2.16 0 3.97-.72 5.3-1.94l-2.52-1.96c-.72.48-1.64.77-2.78.77-2.13 0-3.94-1.44-4.6-3.37H4.9v2.02C6.23 20.24 8.85 22 12 22z"></path>-->
<!--                        <path d="M7.4 14.5c-.17-.51-.26-1.06-.26-1.6s.09-1.09.26-1.6V9.28H4.9A8.68 8.68 0 0 0 4 12c0 1.4.34 2.72.9 3.72l2.5-1.96z"></path>-->
<!--                        <path d="M12 7.5c1.2 0 2.28.42 3.13 1.23l2.36-2.36C15.97 4.72 14.16 4 12 4 8.85 4 6.23 5.76 4.9 8.28l2.5 1.96c.66-1.93 2.47-3.37 4.6-3.37z"></path>-->
<!--                    </svg>-->
<!--                    <span>使用 Google 登录</span>-->
<!--                </button>-->
<!--                <button type="button" class="social-btn github">-->
<!--                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<!--                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>-->
<!--                    </svg>-->
<!--                    <span>使用 GitHub 登录</span>-->
<!--                </button>-->
<!--            </div>-->
        </form>

        <div class="login-footer">
            还没有账户? <a href="/register">立即注册</a>
        </div>

        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="alert-message error">
                    {{ messages[0] }}
                </div>
            {% endif %}
        {% endwith %}
    </div>
</div>
{% endblock %}